<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车位引导页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/element/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: whitesmoke;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            height: 150px;
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        /*canvas*/
        #canvas {
            background-image: url("img/park/park.png");
            width: 962px;
            height: 527px;
        }
    </style>
</head>
<body style="margin: 0">
<div id="app">
    <el-container>
        <el-header style="padding-left: 0;padding-right: 0">
            <!--导航栏-->
            <el-menu :default-active="'1'"
                     class="el-menu-demo"
                     mode="horizontal"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" onclick="javascript:location.href='index.html'">首页</el-menu-item>
                <el-menu-item index="2" onclick="javascript:location.href='myreserve.html'">我的预约</el-menu-item>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">访问官网</a></el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <el-aside width="12%"></el-aside>
            <el-main>
                <el-alert v-if="reserved" v-bind:title="title1" type="success"
                          show-icon></el-alert>
                <el-alert v-if="!reserved" v-bind:title="title2" type="warning" show-icon></el-alert>
                <el-divider></el-divider>
                <!--栅格-->
                <canvas id="canvas" width="962" height="527"></canvas>
                <el-divider></el-divider>

                <el-button type="primary" onclick="javascript:location.href='reserve.html'" icon="el-icon-arrow-left">
                    预约车位页面
                </el-button>
                <el-button type="success" @click="reserveUnlock">解锁预约车位</el-button>
                <el-button type="danger" @click="parking">停入车位（模拟传感器触发）</el-button>
                <el-button type="info" onclick="javascript:location.href='pay.html'">缴费页面<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
                <el-divider></el-divider>
            </el-main>
            <el-aside width="12%"></el-aside>
        </el-container>

        <el-footer>© 2020 中国地质大学（武汉） .Powered by CUG. | 服务器状态 | Donate</el-footer>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            reserved: null,
            reservedSpace: null,
            title1: "请按照引导路线停入4号车位（预约到期时间  ）",
            title2: "您未预约车位或预约已过期"
        },
        methods: {
            getReserveInfo: function () {
                var that = this;
                axios.get("/park/reserveInfo").then(function (response) {
                    if (response.data.flag) {
                        that.reservedSpace = response.data.res;
                        that.title1 = "请按照引导路线停入4号车位（预约到期时间" + that.reservedSpace.startTime + "）";
                    } else {
                        that.title2 = "您未预约车位或预约已过期";
                        console.log("没有路径导航信息");
                    }
                    that.reserved = response.data.flag;
                }, function (err) {
                    console.log(err);
                });
            },
            getShortestPath: function () {
                var that = this;
                axios.get("/park/path").then(function (response) {
                    var vs = response.data.res;
                    if (vs != null) {
                        showShortestPath(vs);
                    } else {
                        console.log("没有路径导航信息");
                    }
                    //alert(response.data.msg);
                }, function (err) {
                    console.log(err);
                });
            },
            showMessage: function (type, message) {
                this.$message({
                    message: message,
                    type: type
                });
            },
            reserveUnlock: function () {//解锁预定
                if (this.reservedSpace == null) {
                    this.showMessage('warning', "您未预定车位");
                    return;
                }
                var that = this;
                axios({
                    method: "post",
                    url: "/park/reserveUnlock",
                }).then(
                    function (response) {
                        if (response.data.flag) {
                            that.showMessage('success', response.data.msg);
                        } else {
                            that.showMessage('warning', response.data.msg);
                        }
                    }, function (err) {
                        console.log(err);
                    }
                );
            },

            parking: function () {//停车
                if (this.reservedSpace == null) {
                    this.showMessage('warning', "您未预定车位");
                    return;
                }
                var that = this;
                axios({
                    method: "post",
                    url: "/park",
                    params: {
                        id: this.reservedSpace.id,
                    }
                }).then(
                    function (response) {
                        if (response.data.flag) {
                            that.showMessage('success', response.data.msg);
                        }else{
                            that.showMessage('warning', response.data.msg);
                        }
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            },
        }
    });

    var vs = [
        // {"x": 478, "y": 450},
        // {"x": 478, "y": 384},
        // {"x": 478, "y": 318},
        // {"x": 218, "y": 318},
        // {"x": 218, "y": 264},
        // {"x": 138, "y": 264}
    ];//最短路径经过的所有节点

    window.onload = function () {
        //showShortestPath(vs);
        app.getReserveInfo();
        app.getShortestPath();

        setTimeout(function () {
            if (app.reserved) {
                app.getReserveInfo();
                app.getShortestPath();
            }
        }, 1 * 60 * 1000);
    };

    //画最短路径
    function showShortestPath(vs) {
        var clock = document.querySelector('#canvas');
        if (clock.getContext) {
            var ctx = clock.getContext('2d');
            ctx.save();
            ctx.strokeStyle = '#228B22';
            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(vs[0].x, vs[0].y);//画笔移动到起点
            for (var i = 1; i < vs.length; i++) {
                ctx.lineTo(vs[i].x, vs[i].y);//画下一个点之间的折线
            }
            ctx.stroke()
            //在倒数两个点之间画箭头
            drawArrow(ctx,
                vs[vs.length - 2].x, vs[vs.length - 2].y,
                vs[vs.length - 1].x, vs[vs.length - 1].y,
                30, 30, 10, "#228B22");
            //drawArrow(ctx, 182, 217, 108, 217, 30, 30, 10, "#228B22");
            ctx.stroke()
        }

        //画箭头的函数
        function drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
            var theta = theta || 30,
                headlen = headlen || 10,
                width = width || 1,
                color = color || '#000',
                angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
                angle1 = (angle + theta) * Math.PI / 180,
                angle2 = (angle - theta) * Math.PI / 180,
                topX = headlen * Math.cos(angle1),
                topY = headlen * Math.sin(angle1),
                botX = headlen * Math.cos(angle2),
                botY = headlen * Math.sin(angle2);
            ctx.save();
            ctx.beginPath();
            var arrowX, arrowY;
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            arrowX = toX + topX;
            arrowY = toY + topY;
            ctx.moveTo(arrowX, arrowY);
            ctx.lineTo(toX, toY);
            arrowX = toX + botX;
            arrowY = toY + botY;
            ctx.lineTo(arrowX, arrowY);
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.stroke();
            ctx.restore();
        }
    }
</script>
</body>
</html>